<script setup>
  import { ref, toRefs, defineExpose } from 'vue';
  import { useDrawerStore } from '@/store/drawerDataStores.js';
  import { message } from '@/utils/message';


  const drawerStore = useDrawerStore();
  const props = defineProps({
    devVarTableSelectedItem: {
      type: Object,
      default() {
        return {}
      }
    },
    publicForm: {
      type: Object,
      default() {
        return {}
      }
    }
  });
  const { devVarTableSelectedItem, publicForm } = toRefs(props);
  const emit = defineEmits(['childFormObj']);

  const ruleFormRef = ref(),
    ruleFormTop = ref({
      protocolType: undefined, // 协议类型
      protocolAddress: undefined, //协议地址
      protocolNumber: undefined, //协议数量
    }),
    ruleFormWifRef = ref(),
    ruleFormLeft = ref({
      wifiAccount: undefined, // WIFI账号
      wifiPassword: undefined, // WIFI密码
      passiveIp: undefined, // 从站ip
      passivePort: undefined, //端口号
    }),
    tableData = ref([]);
  // 确定按钮
  const confirmClick = () => {
    if (ruleFormTop.value.protocolType && ruleFormTop.value.protocolAddress && ruleFormTop.value.protocolNumber) {
      // 检查数组中是否已经存在完全相同的对象
      let isDuplicate = tableData.value.some((obj) => {
        return  obj.protocolType === ruleFormTop.value.protocolType &&
                obj.protocolAddress === ruleFormTop.value.protocolAddress &&
                obj.protocolNumber === ruleFormTop.value.protocolNumber;
      });
      if (!isDuplicate) {
        tableData.value.push({
          protocolType: ruleFormTop.value.protocolType,
          protocolAddress: ruleFormTop.value.protocolAddress,
          protocolNumber: ruleFormTop.value.protocolNumber
        })
      }
    }
  };
  // 删除按钮
  const deleteClick = () => {
    if (selectedKey.value.length === 0) {
      message('请选择要删除的数据',{ type: 'warning'});
      return;
    }
    tableData.value = tableData.value.filter(row => !selectedKey.value.includes(row));
    selectedKey.value = [];
  };
  // table多选事件
  const selectedKey = ref([]);
  const handleSelectionChange = (keys) => {
    selectedKey.value = keys;
  };
  // 配置按钮
  const configClick = () => {
    ruleFormWifRef.value.validate((valid) => {
      if (valid) {
        if (selectedKey.value.length > 0) {
          let formObj = {
            wifiAccount: ruleFormLeft.value.wifiAccount, //wifi账号
            wifiPassword: ruleFormLeft.value.wifiPassword, //wifi密码
            passiveIp: ruleFormLeft.value.passiveIp, //从站地址
            passivePort: ruleFormLeft.value.passivePort, //从站端口
            protocolType:  selectedKey.value[0].protocolType,// 协议类型
            protocolAddress: selectedKey.value[0].protocolAddress, //协议地址
            protocolNumber: selectedKey.value[0].protocolNumber, //协议数量
          }
          emit('childFormObj', formObj);
        } else {
          message('请填写所有的数据', { type: 'warning' });
        }
      } else {
        return false;
      }
    });
  };
  // 父组件调用清空函数
  const clearVar = () => {
<<<<<<< HEAD
    ruleFormWifRef.value.resetFields();
    ruleFormRef.value.resetFields();
=======
    ruleFormLeft.value.wifiAccount = undefined;
    ruleFormLeft.value.wifiPassword = undefined;
    ruleFormLeft.value.passiveIp = undefined;
    ruleFormLeft.value.passivePort = undefined;
    ruleFormTop.value.protocolType = undefined;
    ruleFormTop.value.protocolAddress = undefined;
    ruleFormTop.value.protocolNumber = undefined;
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
    tableData.value = [];
  };
  // 父组件调用保存函数
  const saveStore = () => {
    drawerStore.ruleFormLeft = ruleFormLeft.value;
    drawerStore.tableData = tableData.value;
    drawerStore.RTUForm = ruleFormTop.value;
  };
  // 父组件调用赋值函数
  const copyStore = () => {
    if (devVarTableSelectedItem.value.state === 1) {
      ruleFormLeft.value.wifiAccount = devVarTableSelectedItem.value.wifiAccount;
      ruleFormLeft.value.wifiPassword = devVarTableSelectedItem.value.wifiPassword;
      ruleFormLeft.value.passiveIp = devVarTableSelectedItem.value.passiveIp;
      ruleFormLeft.value.passivePort = devVarTableSelectedItem.value.passivePort;
      ruleFormTop.value.protocolType = devVarTableSelectedItem.value.protocolType;
      ruleFormTop.value.protocolAddress = devVarTableSelectedItem.value.protocolAddress;
      ruleFormTop.value.protocolNumber = devVarTableSelectedItem.value.protocolNumber;
      tableData.value = [{
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber
      }];
    } else {
      ruleFormLeft.value = drawerStore.ruleFormLeft;
      tableData.value = drawerStore.tableData;
      ruleFormTop.value = drawerStore.RTUForm;
    }
  };
  defineExpose({
    clearVar,
    saveStore,
    copyStore
  });
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormWifRef"
      :inline="false"
      :model="ruleFormLeft"
<<<<<<< HEAD
      label-position="right"
      label-width="auto"
=======
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
    >
      <el-form-item
        label="WIFI账号"
        prop="wifiAccount"
        :rules="[{ required: true, message: '请输入WIFI账号', trigger: 'blur' }]"
      >
        <el-input v-model="ruleFormLeft.wifiAccount" clearable placeholder="请输入WIFI账号"></el-input>
      </el-form-item>
      <el-form-item
        label="WIFI密码"
        prop="wifiPassword"
        :rules="[{ required: true, message: '请输入WIFI密码', trigger: 'blur' }]"
      >
        <el-input v-model="ruleFormLeft.wifiPassword" clearable placeholder="请输入WIFI密码"></el-input>
      </el-form-item>
      <el-form-item
        label="从站IP"
        prop="passiveIp"
        :rules="[{ required: true, message: '请输入从站IP', trigger: 'blur' }]"
      >
        <el-input v-model="ruleFormLeft.passiveIp" clearable placeholder="请输入从站IP"></el-input>
      </el-form-item>
      <el-form-item
        label="端口号"
        prop="passivePort"
        :rules="[{ required: true, message: '请输入端口号', trigger: 'blur' }]"
      >
        <el-input v-model="ruleFormLeft.passivePort" clearable placeholder="请输入端口号"></el-input>
      </el-form-item>
    </el-form>
    <el-form
      ref="ruleFormRef"
      :model="ruleFormTop"
      :inline="true"
      label-position="top"
    >
<<<<<<< HEAD
      <el-form-item label="类型" prop="protocolType" style="width: 110px;margin-right: 20px;">
=======
      <el-form-item label="类型" style="width: 110px;margin-right: 20px;">
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
        <el-select
          v-model="ruleFormTop.protocolType"
          placeholder="请选择类型"
        >
          <el-option label="coil" value="coil" />
          <el-option label="register" value="register" />
        </el-select>
      </el-form-item>
<<<<<<< HEAD
      <el-form-item label="地址" prop="protocolAddress" style="width: 110px;margin-right: 20px;">
        <el-input v-model="ruleFormTop.protocolAddress" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="protocolNumber" style="width: 110px;margin-right: 20px;">
=======
      <el-form-item label="地址" style="width: 110px;margin-right: 20px;">
        <el-input v-model="ruleFormTop.protocolAddress" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="数量" style="width: 110px;margin-right: 20px;">
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
        <el-input v-model="ruleFormTop.protocolNumber" placeholder="请输入数量"></el-input>
      </el-form-item>
      <el-form-item style="width: 50px;">
        <el-button type="primary" class="form-btn" @click="confirmClick">确定</el-button>
      </el-form-item>
      <el-form-item style="width: 50px;margin-right: 0px;">
        <el-button type="primary" class="form-btn" @click="deleteClick">删除</el-button>
      </el-form-item>
    </el-form>
    <div class="form-table">
      <el-table
        ref="multipleTableRef"
        class="custom-table"
        :data="tableData"
        border
        stripe
        max-height="200"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="protocolType" label="类型" align="center"></el-table-column>
        <el-table-column prop="protocolAddress" label="地址" align="center"></el-table-column>
        <el-table-column prop="protocolNumber" label="数量" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .form-btn {
    margin-top: 30px;
  }

  .form-table {
    padding-bottom: 20px;
  }

  .config-btn {
    text-align: right;
  }
</style>
